<template>
  <div>
    <div class="label">
      计费方式
      <template v-if="weightType === 'goods'">
        <el-tooltip placement="top">
          <template #content >
            <div class="mgb10">
              <span>计费方式（重量）：</span><br>
              <span>重量阶梯内，按每个商品的重量或体积重计费（两者相较取大者，体积重除数为6000）</span><br>
              <span>例：一票货中有100个商品，50个1kg，50个2kg，假设库存无变动，则免仓期过后每天收费：50*1kg单价 + 50*2kg单价</span>
            </div>

            <div class="mgb10">
              <span>计费方式（体积）：</span><br>
              <span>体积阶梯内，按每个商品的体积计费</span><br>
              <span>例：一票货中有100个商品，50个0.00001方，50个0.001方，假设库存无变动，则免仓期过后每天收费：50*0.00001方单价 + 50*0.001方单价</span>
            </div>
          </template>
          <i class="el-icon-question font-blue"></i>
        </el-tooltip>
      </template>
      <template v-else-if="weightType === 'box'">
        <el-tooltip placement="top">
          <template #content >
            <div class="mgb10">
              <span>计费方式（重量）：</span><br>
              <span>重量阶梯内，按每箱商品的重量或体积重计费（两者相较取大者，体积重除数为6000）</span><br>
              <span>每箱重量=单个商品重量 * 箱装数</span><br>
              <span>例：一个票货中100个商品，共两箱，一箱50个1kg，另一箱50个2kg，假设库存无变动，则免仓期过后每天收费：50kg单价 + 100kg单价</span>
            </div>

            <div class="mgb10">
              <span>计费方式（体积）：</span><br>
              <span>体积阶梯内，按每箱商品的体积计费</span><br>
              <span>每箱体积=单个商品体积 * 箱装数</span><br>
              <span>例：一个票货中100个商品，共两箱，一箱50个0.00001方，另一箱50个0.001方，假设库存无变动，则免仓期过后每天收费：0.0005方单价 + 0.05单价</span>
            </div>
          </template>
          <i class="el-icon-question font-blue"></i>
        </el-tooltip>
      </template>
      ：

      <el-switch
        class="storage-type-switch"
        v-model="storageType"
        active-value="volume"
        inactive-value="weight"
        active-color="#13ce66"
        inactive-color="#ff8000"
        :active-text="$t('体积')"
        :inactive-text="$t('重量')"
      >
      </el-switch>
    </div>
    <div class="range-list">
      <storage-weight-range :weight-range-arr="weightRangeArr" :type="type" :can-delete-all="canDeleteAll" :weight-type="weightType" :cal-type="calType"></storage-weight-range>
    </div>
  </div>
</template>


<script>
import StorageWeightRange from "@/views/warehouse/components/StorageWeightRange.vue";

export default {
  name: "StorageRange",
  components: {StorageWeightRange},
  props: {
    weightRangeArr: {
      type: Array,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
    canDeleteAll: {
      type: Boolean,
      default: false,
    },
    weightType: {
      type: String,
      default: 'goods',
    },
    calType: {
      type: String,
      default: 'weight',
    },
  },
  data(){
    return {
      storageType: 'weight',
    }
  },
  watch: {
    storageType:{
      immediate: true,
      handler(newVal) {
        this.$emit('update:calType', newVal);
      }
    },
    calType(){
      this.storageType = this.calType;
    }
  }
}
</script>


<style>
.storage-type-switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}

/*打开时文字位置设置*/
.storage-type-switch .el-switch__label--right {
  z-index: 1;
}

/* 调整打开时文字的显示位子 */
.storage-type-switch .el-switch__label--right span {
  //margin-left: 9px;
}

/*关闭时文字位置设置*/
.storage-type-switch .el-switch__label--left {
  z-index: 1;
}

/* 调整关闭时文字的显示位子 */
.storage-type-switch .el-switch__label--left span {
  margin-left: 22px;
}

/*显示文字*/
.storage-type-switch .el-switch__label.is-active {
  display: block;
}
/* 调整按钮的宽度 */
.storage-type-switch.el-switch .el-switch__core,
.cal-type .el-switch .el-switch__label {
  width: 60px !important;
  margin: 0;
}
</style>

<style scoped lang="scss">
.label {
  font-weight: 600;
}
</style>
